<template>
  <el-dialog v-model="drawer" title="文件分类" :append-to-body="true" width="400px" @close="close">
    <div class="classify-box">
        <el-row>
            <el-button size="small" type="primary" @click="addClassify">新增分类</el-button>
        </el-row>
        <el-table size="small" :data="list" border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="value" style="margin-top: 10px" max-height="60vh">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="操作" width="100px" align="center">
                <template #default="scope">
                    <el-button size="small" link type="primary" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="small" link type="primary" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <FileClassModel v-model:dialogDrawer="dialogCreate" :is-edit="isEdit" :default-form="rowForm" @onSubmit="formSubmit"></FileClassModel>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import FileClassModel from '/@/components/fileClass/fileClassModel.vue'
import api from '/@/api/commonApi'

export default {
    name: 'FileClass',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        }
    },
    components: {
        FileClassModel
    },
    emits: ['onClose', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        // 监听页面加载
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    getList()
                }
            }
        )
        const state = reactive({
            list:  [],
            rowForm: {},
            isEdit: false,
            dialogCreate: false            
        })
        const del = (row) => {
            ElMessageBox.confirm(`是否确认删除「${row.name}」?`, '提示',
              {
                  confirmButtonText: '确认',
                  cancelButtonText: '取消',
                  type: 'warning',
              }
          ).then(() => {
                api.removeFileClass({ids: row.id}).then(res => {
                    ElMessage.success('删除成功')
                    getList()
                })
          })
        }
        const edit = row => {
            state.rowForm = row
            state.isEdit = true
            state.dialogCreate = true
        }
        const getList = () => {
            api.fileClassList().then(res => {
                state.list = res.data
            })
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
            context.emit('onClose', true)
        }
        const addClassify = () => {
            state.rowForm = {}
            state.isEdit = false
            state.dialogCreate = true
        }
        const formSubmit = () => {
            getList()
        }
        return {
            ...toRefs(state),
            drawer,
            del,
            close,
            edit,
            addClassify,
            formSubmit
        }
    }
}
</script>

<style>

</style>